// 权限拦截，路由导航守卫
import router from "./router";
import store from "@/store"; // 引入vuex store实例
import NProgress from "nprogress"; // 引入进度条
import "nprogress/nprogress.css"; //  引入进度条样式
// 不需要导出，因为只需要让代码执行即可
// 定义一个白名单
const WhiteList = ["/login", "/404"];
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next 前置守卫回调函数
// next() 放过   next(false) 跳转终止   next(地址)  跳转到某个地址
// 配置前置路由导航守卫
router.beforeEach(async (to, from, next) => {
  NProgress.start(); // 开启进度条
  // 获取用户资料   判断是否有token
  if (store.getters.token) {
    if (to.path === "/login") {
      next("/"); // 跳转到主页
    } else {
      // 判断用户是否第一次访问
      if (!store.getters.userId) {
        // dispatch 调用异步函数（action）中的方法，获取资料接口
        //  async 函数所reture 的内容，用await 就可以接收到
        // roles 是 user/getUserInfo 中return的数据
        const { roles } = await store.dispatch("user/getUserInfo");
        // console.log(roles);
        // await 把异步请求变成同步请求

        // 筛选用户的可以用路由
        const routes = await store.dispatch(
          "permission/filterRoutes",
          roles.menus
        ); // 筛选得到的动态路由
        // routes 筛选的到动态路由
        // console.log(routes);
        // 动态路由 添加到 路由表中 默认的路由  只有静态路由 没有动态路由
        // addRoutes 是router实例中的方法
        router.addRoutes([
          ...routes,
          {
            path: "*",
            redirect: "/404",
            hidden: true
          }
        ]); // 添加动态路由，到路由表中 ; 404路由需要放在所有路由的后面；静态路由 --> 动态路由 --> 404路由
        // 添加路由之后，不能直接next()
        // 如果执行了 addRoutes 请用 next(to.path) 否则会导致，刷新路由权限失效，这是一个已知缺陷
        // 进门了，但是进门之后我要去的地方的路还没有铺好，直接走，掉坑里，多做一次跳转，再从门外往里进一次，跳转之前 把路铺好，再次进来的时候，路就铺好了
        next(to.path); // 获取到权限路由之后，重新匹配权限路由，进行页面渲染
      } else {
        next(); // 直接放行
      }
    }
  } else {
    //   如果没有token
    if (WhiteList.indexOf(to.path) > -1) {
      //   如果找到了，表示在白名单里面
      next();
    } else {
      next("/login");
    }
  }
  NProgress.done(); // 强制关闭进度条一次 为了解决 手动切换地址时  进度条的不关闭的问题
});

// 配置后置路由导航守卫
router.afterEach((to, from, next) => {
  NProgress.done(); // 关闭进度条
});
